<template>
  <div class="index">
    <div class="breadcrumb-def"><el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>入库记录明细</el-breadcrumb-item>
      </el-breadcrumb></div>
    <div class="search-def">
      <el-select size="small" clearable v-model="parameter.dep" placeholder="生产部门">
        <el-option v-for="item in depList" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker size="small" :clearable="false" :unlink-panels="true" v-model="parameter.create_time"
        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-input size="small" style="width: 200px;" v-model="parameter.prd_name" placeholder="料号/名称/规格"></el-input>
      <el-button size="small" @click="searchDataEv()" type="primary">查询</el-button>
      <el-button size="small" @click="ExportDataEvent()" type="primary">导出数据</el-button>
    </div>
    <div class="vxe-table-def"><vxe-table :column-config="{resizable: true}" ref="xTable1" height="100%" align="center" :data="tableData"
        v-loading="loading" element-loading-text="拼命加载中">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="mo_no" title="生产订单"></vxe-column>
        <vxe-column field="type_name" title="单据类型"></vxe-column>
        <vxe-column field="dep_name" title="生产部门"></vxe-column>
        <vxe-column field="create_time" width="150" title="报检日期"></vxe-column>
        <vxe-column field="prd_no" title="物料编码"></vxe-column>
        <vxe-column field="prd_name" title="物料名称"></vxe-column>
        <vxe-column field="spc" title="物料规格"></vxe-column>
        <vxe-column field="qty" title="入库数量"></vxe-column>
        <vxe-column field="h_qty" title="核验数量"></vxe-column>
        <vxe-column field="zy_no" title="转移单号"></vxe-column>
        <vxe-column field="cz_name" title="操作工"></vxe-column>
        <vxe-column field="lr_name" title="质检员"></vxe-column>
        <vxe-column field="bat_no" title="批号"></vxe-column>
        <vxe-column field="rem" title="备注"></vxe-column>
      </vxe-table></div>
    <div class="page-def"><vxe-pager v-if="tableData.length > 0" :loading="loading" :current-page="this.parameter.page"
        :page-sizes="[100, 500, 1000, 2000, 10000]" :page-size="this.parameter.pageSize" :total="this.parameter.total"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
      </vxe-pager></div>
  </div>
</template>

<script>
// import { dateFormatsa } from '@/utlis/FunctionUtils.js'
// import mobileDetect from "mobile-detect";
import { dateFormatsa, countDate } from "@/utlis/FunctionUtils.js";
export default {
  name: 'componentName',
  components: {},
  data() {
    return {
      loading: false,
      text: '',
      tableData: [],
      parameter: {
        create_time: [countDate(new Date(), -5), new Date()],
        prd_name: '',
        dep: '',
        page: 1,
        pageSize: 500,
        total: 0
      },
      depList: [{
        value: '1002212310027358',
        label: '1厂-压铸车间'
      }, {
        value: '1002212210001477',
        label: '2厂-压铸车间'
      },
      {
        value: '1002212310027313',
        label: '1厂-机加车间'
      },
      {
        value: '1002212210001480',
        label: '2厂-机加车间'
      }]
    }
  },
  async mounted() {

  },
  methods: {
    async searchDataEv() {
      this.parameter.page = 1
      await this.searchEv()
    },
    async searchEv() {

      let parameterData = {}
      parameterData.sta_dd = dateFormatsa(this.parameter.create_time[0], 'YYYY-MM-DD')
      parameterData.est_dd = dateFormatsa(this.parameter.create_time[1], 'YYYY-MM-DD')
      parameterData.dep = this.parameter.dep
      parameterData.prd_name = this.parameter.prd_name
      parameterData.page = this.parameter.page
      parameterData.pageSize = this.parameter.pageSize

      this.tableData = []
      this.loading = true
      try {
        const arr_data = await this.BaseRuKuListGet(parameterData)
        console.log(arr_data)
        if (arr_data.status == 202) {
          this.loading = false
          this.$message.error({
            showClose: true,
            message: arr_data.data.msg,
            duration: 0
          })
          return
        }

        if (arr_data.status !== 200) {
          this.loading = false
          this.$message.error({
            showClose: true,
            message: '查询失败',
            duration: 0
          })
          return
        }
        this.tableData = arr_data.data.result.data
        this.parameter.total = arr_data.data.result.total

        this.text = '正在拼命加载中...'
        this.loading = false
        this.$message.success({
          showClose: true,
          message: '查询成功'
        })
      } catch (error) {
        this.loading = false
        if (error.response.status == 401) {
          this.$message.error({
            showClose: true,
            message: 'token过期请重新登录',
            duration: 0
          })
          return
        }
        this.$message.error({
          showClose: true,
          message: '查询接口请求失败',
          duration: 0
        })
      }


    },
    async handlePageChange({ currentPage, pageSize }) {
      this.parameter.page = currentPage
      this.parameter.pageSize = pageSize
      await this.searchEv()
    },

    // 导出数据
    async ExportDataEvent() {
      if (this.tableData.length == 0) {
        this.$message.error('没有需要导出的数据')
        return
      }
      await this.$refs.xTable1.exportData({
        filename: '入库记录明细',
        sheetName: 'Sheet1',
        type: 'xlsx'
      })
    },

  }
}
</script>

<style lang='less' scoped>
.index {
  height: 100%;
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  // background-color: red;
}

.breadcrumb-def {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  // background-color: white;
}

.search-def {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
}

.page-def {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  background-color: white;
}

.vxe-table-def {
  height: calc(100% - 120px);
}
</style>